<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <script src="./lib/vue.js"></script>
    <link rel="stylesheet" href="ShoppingCar.css">
</head>

<body>
    <div id="app">
        <div class="good">
            <h4>商品列表</h4>

            <div class="item">
                <ul v-for="(good,i) in list">
                    <!-- <li>{{user.name}}</li> -->
                    {{good.name}}
                    <button v-on:click="add(i)">添加</button>
                </ul>
            </div>
            <br>
            <button>结算</button>
        </div>



        <div class="good">
            <h4>购物车商品列表</h4>

            <div class="item" id="id2">
                <ul v-for='(list,index) in classlist'>
                    <!-- <li>{{list}}</li> -->
                    {{list}}
                    <button @click='remove(index)'>删除</button>
                </ul>

                <p>全选<input type="checkbox" v-model="checks" @change="Numlist()"></p>
                <ul v-for='(list,index) in classlist'>
                    <input type="checkbox" v-model="checksListOn" :value="list.name">{{list.name}}
                    <button @click='remove(index)'>删除<button>
                </ul>
            </div>
        </div>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                classlist: [],
                list: [
                    { id: 1, name: "商品一" },
                    { id: 2, name: "商品二" },
                    { id: 3, name: "商品三" },
                    { id: 4, name: "商品四" },
                    { id: 5, name: "商品五" }
                ],

            },
            methods: {
                add(index) {
                    //插入数据到商品库
                    this.classlist.push(this.list[index].name)
                },
                remove: function (index) {
                    this.classlist.splice(index, 1)
                },
                Numlist: function () {

                    if (this.checks) {
                        var listArr = [];
                        for (var i = 0; i < this.classlist.length; i++) {
                            listArr.push(this.classlist[i].name);
                        }
                        this.checksListOn = listArr;
                    } else {
                        this.checksListOn = []
                    }
                },

            },
        }
			})
    </script>
</body>
<html>